<template>
	<view class="auth-container">
		<!-- 粒子背景 -->
		<view class="particle-bg">
			<view v-for="(dot, index) in particles" class="particle" :style="particleStyle(dot)"></view>
		</view>

		<!-- 插画 -->
		<view class="header-illustration">
			<image src="https://example.com/forget-illustration.webp" mode="aspectFit"></image>
		</view>

		<!-- 步骤指示 -->
		<view class="step-indicator">
			<text :class="['step', { active: currentStep === 1 }]">1</text>
			<view class="line"></view>
			<text :class="['step', { active: currentStep === 2 }]">2</text>
		</view>

		<!-- 步骤1：验证身份 -->
		<view v-show="currentStep === 1" class="form-box">
			<view class="form-title">
				<text>找回爱情密码</text>
			</view>

			<u-form :model="formStep1" ref="form1">
				<u-form-item label="📱 手机号" label-width="100">
					<u-input v-model="formStep1.phone" placeholder="输入绑定的手机号" />
				</u-form-item>

				<u-form-item label="🔐 验证码" label-width="100">
					<u-input v-model="formStep1.code" placeholder="输入验证码" />
					<u-button size="mini" @click="getSMSCode" :disabled="codeCountdown > 0"
						:custom-style="codeBtnStyle">
						{{ codeBtnText }}
					</u-button>
				</u-form-item>

				<u-button @click="nextStep" shape="circle" :custom-style="btnStyle">
					下一步
				</u-button>
			</u-form>
		</view>

		<!-- 步骤2：重置密码 -->
		<view v-show="currentStep === 2" class="form-box">
			<view class="form-title">
				<text>设置新密码</text>
			</view>

			<u-form :model="formStep2" ref="form2">
				<u-form-item label="❤️ 新密码" label-width="160">
					<u-input v-model="formStep2.password" type="password" placeholder="6位以上字母数字组合" />
				</u-form-item>

				<u-form-item label="💞 确认密码" label-width="160">
					<u-input v-model="formStep2.confirmPwd" type="password" placeholder="再次输入新密码" />
				</u-form-item>

				<u-button @click="submitReset" shape="circle" :custom-style="btnStyle">
					重设爱情密码
				</u-button>
			</u-form>
		</view>

		<!-- 导航链接 -->
		<view class="footer-links">
			<text @click="navTo('/pages/login')">想起密码？立即登录</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentStep: 1,
			codeCountdown: 0,
			particles: Array(30).fill().map(() => ({
				x: Math.random() * 100,
				y: Math.random() * 100,
				size: Math.random() * 3 + 1,
				duration: Math.random() * 5 + 3
			})),
			formStep1: { phone: '', code: '' },
			formStep2: { password: '', confirmPwd: '' },
			btnStyle: {
				background: 'linear-gradient(135deg, #FFB7B2 0%, #FF9AA2 100%)',
				color: '#fff',
				height: '90rpx',
				marginTop: '40rpx'
			},
			codeBtnStyle: {
				width: '180rpx',
				background: 'rgba(255,245,230,0.9)',
				color: '#FF69B4'
			}
		}
	},
	computed: {
		codeBtnText() {
			return this.codeCountdown > 0
				? `${this.codeCountdown}秒后重发`
				: '获取验证码'
		}
	},
	methods: {
		particleStyle(dot) {
			return {
				left: `${dot.x}%`,
				top: `${dot.y}%`,
				width: `${dot.size}px`,
				height: `${dot.size}px`,
				animationDuration: `${dot.duration}s`,
				background: `rgba(255,105,180,${0.3 + dot.size / 10})`
			}
		},
		navTo(path) {
			uni.navigateTo({ url: path })
		},
		nextStep() {
			this.$refs.form1.validate().then(valid => {
				if (valid) this.currentStep = 2
			})
		},
		submitReset() {
			this.$refs.form2.validate().then(valid => {
				if (valid) {
					uni.showLoading({ title: '正在更新密码...' })
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({ title: '密码更新成功 ❤️' })
						setTimeout(() => uni.redirectTo({ url: '/pages/login' }), 1500)
					}, 1000)
				}
			})
		},
		getSMSCode() {
			if (!/^1[3-9]\d{9}$/.test(this.formStep1.phone)) {
				return uni.showToast({ title: '请输入正确手机号', icon: 'none' })
			}
			this.codeCountdown = 60
			const timer = setInterval(() => {
				this.codeCountdown <= 0 ? clearInterval(timer) : this.codeCountdown--
			}, 1000)
			uni.showToast({ title: '验证码已发送' })
		}
	}
}
</script>

<style lang="scss" scoped>
.auth-container {
	height: 100vh;
	background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);
	position: relative;
	overflow: hidden;

	.particle-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;

		.particle {
			position: absolute;
			border-radius: 50%;
			animation: float 8s infinite linear;
			opacity: 0.6;
		}
	}

	.header-illustration {
		padding: 60rpx 0 4vh;
		text-align: center;
		position: relative;
		z-index: 2;

		image {
			width: 500rpx;
			height: 30vh;
			max-height: 300rpx;
			filter: drop-shadow(0 10rpx 20rpx rgba(255, 105, 180, 0.2));
		}
	}

	.step-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60rpx 0 40rpx;
		position: relative;
		z-index: 2;

		.step {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background: #FFB6C1;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			transition: all 0.3s;
			box-shadow: 0 4rpx 12rpx rgba(255, 105, 180, 0.2);

			&.active {
				background: #FF69B4;
				transform: scale(1.2);
				box-shadow: 0 6rpx 20rpx rgba(255, 105, 180, 0.3);
			}
		}

		.line {
			width: 100rpx;
			height: 4rpx;
			background: #FFB6C1;
			margin: 0 20rpx;
			transition: background 0.3s;
		}
	}

	.form-box {
		background: rgba(255, 255, 255, 0.95);
		margin: 0 40rpx;
		padding: 50rpx 40rpx;
		border-radius: 48rpx;
		box-shadow: 0 16rpx 48rpx rgba(255, 105, 180, 0.1);
		position: relative;
		z-index: 2;
		transform-origin: top;
		animation: formSlide 0.6s ease;

		.form-title {
			text-align: center;
			font-size: 40rpx;
			color: #FF69B4;
			margin-bottom: 60rpx;
			font-weight: 500;
		}
	}

	.footer-links {
		margin-top: 40rpx;
		text-align: center;
		position: relative;
		z-index: 2;

		text {
			color: #FF7F7F;
			font-size: 26rpx;
			border-bottom: 2rpx solid transparent;
			transition: all 0.3s;

			&:active {
				opacity: 0.6;
			}
		}
	}
}

/* 动画定义 */
@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-200rpx);
	}

	100% {
		transform: translateY(-400rpx);
	}
}

@keyframes formSlide {
	from {
		opacity: 0;
		transform: translateY(60rpx);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 深度样式覆盖 */
::v-deep {
	.u-form-item {
		margin-bottom: 40rpx;

		&__body {
			background: rgba(255, 250, 240, 0.8) !important;
			padding: 20rpx !important;
			border-radius: 16rpx !important;
		}
	}

	.u-button {
		&--default {
			box-shadow: 0 6rpx 20rpx rgba(255, 105, 180, 0.2) !important;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.98);
			}
		}
	}
}
</style>